{% extends "base.html" %}

{% block title %}添加同步目录{% endblock %}

{% block content %}
<div class="form-container">
    <h2>添加同步目录</h2>
    <form method="POST" action="{{ url_for('add_sync_dir') }}">
        <div class="form-group">
            <label for="local_path">本地路径</label>
            <div class="input-group">
                <input type="text" id="local_path" name="local_path" required readonly>
                <div class="input-group-append">
                    <button type="button" class="btn btn-secondary" onclick="selectFolder()">选择文件夹</button>
                </div>
            </div>
            <small class="form-text text-muted">选择要同步的本地文件夹，所有文件将与FTP服务器同步</small>
        </div>
        <div class="form-group">
            <label for="ftp_host">FTP服务器地址</label>
            <input type="text" id="ftp_host" name="ftp_host" required>
            <small class="form-text text-muted">
                - 如果是本机FTP服务器，输入：localhost 或 127.0.0.1<br>
                - 如果是局域网FTP服务器，输入局域网IP，例如：192.168.1.100<br>
                - 如果是远程FTP服务器，输入域名或IP地址，例如：ftp.example.com
            </small>
        </div>
        <div class="form-group">
            <label for="ftp_user">FTP用户名</label>
            <input type="text" id="ftp_user" name="ftp_user" required>
            <small class="form-text text-muted">输入FTP服务器的用户名，如果使用FileZilla Server，这是你在用户管理中创建的用户名</small>
        </div>
        <div class="form-group">
            <label for="ftp_pass">FTP密码</label>
            <input type="password" id="ftp_pass" name="ftp_pass" required>
            <small class="form-text text-muted">输入对应FTP用户的密码</small>
        </div>
        <div class="form-group">
            <label for="ftp_path">FTP路径</label>
            <input type="text" id="ftp_path" name="ftp_path" required>
            <small class="form-text text-muted">
                - 根目录请输入：/<br>
                - 指定子目录请以/开头，例如：/backup/documents<br>
                - 如果使用FileZilla Server，这是你在"共享文件夹"中设置的目录
            </small>
        </div>
        <div class="form-group">
            <label for="sync_strategy">同步策略</label>
            <select id="sync_strategy" name="sync_strategy" class="form-control" required>
                <option value="local_priority">本地优先</option>
                <option value="server_priority">服务器优先</option>
                <option value="time_size">时间大小比较</option>
            </select>
            <small class="form-text text-muted">
                - 本地优先：本地文件的更改将覆盖服务器<br>
                - 服务器优先：服务器文件的更改将覆盖本地<br>
                - 时间大小比较：根据修改时间和文件大小决定
            </small>
        </div>
        <button type="submit" class="btn btn-primary">添加目录</button>
        <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">取消</a>
    </form>
</div>

<script>
function selectFolder() {
    fetch('{{ url_for("select_folder") }}')
        .then(response => response.json())
        .then(data => {
            if (data.path) {
                document.getElementById('local_path').value = data.path;
            }
        })
        .catch(error => console.error('Error:', error));
}
</script>

<style>
.input-group {
    display: flex;
    gap: 10px;
}
.input-group input {
    flex: 1;
}
.form-text {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
.form-group {
    margin-bottom: 1.5rem;
}
select.form-control {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin-bottom: 0.5rem;
}
</style>
{% endblock %}